<template>
  <a-modal
    centered
    title="添加客户资源"
    v-model="addVisible"
    :width="600"
    @ok="onAddCustomer"
    @cancel="onCancel"
  >
    <a-form-model
      ref="addForm"
      :model="addCustomerForm"
      :rules="addRules"
    >
      <a-row :gutter="40">
        <a-col :span="12">
          <a-form-model-item label="客户来源" prop="source">
            <a-select v-model="addCustomerForm.source">
              <a-select-option v-for="(item,index) in sourceOpts" :key="index" :value="index">{{ item }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="客户姓名" prop="customer_name">
            <a-input v-model="addCustomerForm.customer_name" type="text" placeholder="输入客户姓名" />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="状态标记" prop="customer_status">
            <a-select v-model="addCustomerForm.customer_status">
              <a-select-option v-for="(item,index) in statusOpts" :key="index" :value="index">{{ item }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="联系电话1" prop="phone">
            <a-input v-model="addCustomerForm.phone" type="text" placeholder="输入联系电话" />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="注册名称" prop="tm_name">
            <a-input v-model="addCustomerForm.tm_name" type="text" placeholder="输入商标名称/专利名称/其他" />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="联系电话2">
            <a-input v-model="addCustomerForm.phone2" type="text" placeholder="输入联系电话" />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="申请主体" prop="subject_of_application">
<!--            <a-input v-model="addCustomerForm.subject_of_application" type="text" placeholder="输入申请主体" />-->
            <a-select
              show-search
              :value="sname"
              :filter-option="false"
              @change="handleChange"
              @search="handleSearch"
              style="width: 90%"
            >
              <a-select-option v-for="(item, index) in subjectOpts" :key="index" :value="item.subject">{{item.subject}}</a-select-option>
            </a-select>
            <a-icon :style="{ width: '10%', fontSize: '20px' }" type="plus-circle" @click="addApply" />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="客户微信" prop="wechat">
            <a-input v-model="addCustomerForm.wechat" type="text" placeholder="请输入客户微信号" />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="行业">
            <a-input v-model="addCustomerForm.industry" type="text" placeholder="请输入客户所属行业" />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="邮箱">
            <a-input v-model="addCustomerForm.email" type="text" placeholder="请输入客户邮箱" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-form-model-item label="备注" prop="notes">
            <a-textarea v-model="addCustomerForm.notes" :rows="4"></a-textarea>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
    <apply-modal v-if="addVisible2" @cancel="onCancelAdd"></apply-modal>
  </a-modal>
</template>

<script>
import { getAddCustomer, getSubject, postAddCustomer } from '@/api/customer'
import ApplyModal from '@/views/customer/components/ApplyModal'

export default {
  components: {
    ApplyModal
  },
  name: 'AddCustomer',
  data () {
    return {
      addVisible: false,
      sourceOpts: {},
      statusOpts: {},
      intentionOpts: {},
      addCustomerForm: {},
      addRules: {
        customer_name: [ { required: true, message: '请输入客户姓名', trigger: 'blur' } ],
        source: [ { required: true, message: '请选择客户来源', trigger: 'change' } ],
        customer_status: [ { required: true, message: '选择标记状态', trigger: 'change' } ],
        phone: [
          { required: true, message: '请输入客户联系电话', trigger: 'blur' },
          { pattern: /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/, message: '请输入正确的手机号码', trigger: 'blur' }
        ],
        subject_of_application: [ { required: true, message: '请输入申请主体', trigger: 'blur' } ],
        tm_name: [ { required: true, message: '请输入注册名称', trigger: 'blur' } ],
        wechat: [ { required: true, message: '请输入微信号', trigger: 'blur' } ]
      },
      sname: '',
      addVisible2: false,
      subjectOpts: []
    }
  },
  created () {
    this.getAddInfo()
  },
  methods: {
    getAddInfo () {
      const app = this
      getAddCustomer().then(res => {
        if (res.status === 0) {
          app.sourceOpts = res.result.source_opts
          app.intentionOpts = res.result.intention_opts
          app.statusOpts = res.result.customer_status_opts
          app.addCustomerForm = res.result.customer
          getSubject().then(res => {
            app.subjectOpts = res.result.data
          })
          app.addVisible = true
        } else {
          app.$warning({
            title: res.msg
          })
        }
      })
    },
    onAddCustomer () {
      const app = this
      app.$refs.addForm.validate(valid => {
        if (valid) {
          const form = {}
          for (const k in app.addCustomerForm) {
            form['customer[' + k + ']'] = app.addCustomerForm[k]
          }
          postAddCustomer(form).then(res => {
            if (res.status === 0) {
              app.$confirm({
                title: '客户已添加完成，等待组长审核',
                onOk: () => {
                  app.onCancel()
                }
              })
            } else {
              app.$warning({
                title: res.msg
              })
            }
          })
        } else {
          return false
        }
      })
    },
    onCancel () {
      this.addVisible = false
      this.$emit('cancel', this.addVisible)
    },
    handleChange (value) {
      this.sname = value
      this.addCustomerForm.subject_of_application = value
      const params = {}
      params['filter[subject]'] = value
      getSubject(params).then(res => {
        this.subjectOpts = res.result.data
      })
    },
    handleSearch (value) {
      const params = {}
      params['filter[subject]'] = value
      getSubject(params).then(res => {
        this.subjectOpts = res.result.data
      })
    },
    addApply () {
      this.addVisible2 = true
    },
    onCancelAdd (visible) {
      this.addVisible2 = visible
    }
  }
}
</script>

<style scoped>

</style>
